<template>
  <el-tree 
    :data="data" 
    :props="defaultProps"
    default-expand-all>
    <div class="custom-tree-node" slot-scope="{ data }">
      <el-checkbox 
        v-model="data.status" 
        :true-label="1"
        :false-label="0"
        @change="changeStatus(data)">{{ data.name }}</el-checkbox>
      </div>
  </el-tree>
</template>

<script>
export default {
  name: "groupMenuTree",
  components: {},
  data() {
    return {
      defaultProps: {//对应字段名
        children: 'children',
        label: 'name'
      },
      data:[],//菜单数据
      groupId:''//群组ID
    }
  },
  methods: {
    getList(groupId) {//父组件调用此方法 传入groupId
      //赋值
      this.groupId = groupId
      //获取菜单树
      this.$http({
        url: "/v1/groupMenuTree",
        method: "GET",
        params:{ groupId:this.groupId }
      }).then((res) => {
        //菜单数据赋值
        this.data = res
      })
    },
    changeStatus(data){
      //data 菜单数据
      if(data.status == 1){//启动这个菜单
        this.$http({
          url:'/v1/groupMenu',
          method:'POST',
          data:{
            groupId:this.groupId,
            menuId:data.id//菜单Id
          }
        })
      }else{//停用这个菜单
        this.$http({
          url:'/v1/groupMenu',
          method:'DELETE',
          params:{
            groupId:this.groupId,
            menuId:data.id//菜单Id
          }
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
